<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 计价器管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
                <el-form ref="form" :model="form" label-width="110px" label-position="left" >
                <el-row :gutter="20">
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="计价器厂商名称">
                            <el-select class="handle-select" v-model="form.factname" clearable filterable placeholder="请选择" @change="currentSel">
                                <el-option
                                        v-for="item in factnameselectList"
                                        :key="item.id"
                                        :label="item.factname"
                                        :value="item.factname"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="计价器型号">
                            <el-select class="handle-select" v-model="form.jjqtype" clearable filterable placeholder="请选择">
                                <el-option
                                        v-for="item in jjqtypeselectList"
                                        :key="item.id"
                                        :label="item.jjqtype"
                                        :value="item.jjqtype"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="价格类别">
                            <el-select class="handle-select" v-model="form.pricetype" clearable filterable placeholder="请选择">
                                <el-option
                                        v-for="item in pricetypeselectList"
                                        :key="item.id"
                                        :label="item.pricetype"
                                        :value="item.pricetype"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light">
                        <el-form-item label="出租车公司名称">
                            <el-select class="handle-select" v-model="form.companyname" clearable filterable placeholder="请选择">
                                <el-option
                                        v-for="item in companynameselectList"
                                        :key="item.id"
                                        :label="item.companyname"
                                        :value="item.companyname"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="车牌号">
                            <el-select class="handle-select" v-model="form.carno" clearable filterable placeholder="请选择">
                                <el-option
                                        v-for="item in carnoselectList"
                                        :key="item.id"
                                        :label="item.carno"
                                        :value="item.carno"
                                ></el-option>
                            </el-select>                        </el-form-item>
                        <!--<el-form-item label="GPS终端号">-->
                            <!--<el-input class="handle-input" v-model="form.gpsnum"></el-input>-->
                        <!--</el-form-item>-->
                        <el-button type="primary" icon="delete" style="margin-left: 30%" class="mr10" @click="search">查询</el-button>
                        <el-button type="primary" icon="delete" class="mr10" @click="all">显示全部</el-button>
                        <el-button type="primary" icon="search" class="mr10"  @click="handleAdd()" >新增</el-button>


                    </div>
                    </el-col>
                </el-row>

                    <!-- 新增弹出框 -->
                    <el-dialog title="新增" :visible.sync="addVisible"  width="37%" >
                        <el-form  ref="form2" :model="form2" label-width="125px" label-position="left" padding-left="5%">
                            <!--<el-row >-->
                                <!--<el-col :span="8" ><div class="grid-content bg-purple">-->

                            <el-form-item label="车牌号"prop="carno" :rules="[
                                    {required:true,message:'车牌号不能为空'}
                                     ]">

                                <!--<el-select class="handle-select" v-model="form2.carno" clearable filterable placeholder="请选择">-->
                                    <!--<el-option-->
                                            <!--v-for="item in carnoselectList"-->
                                            <!--:key="item.id"-->
                                            <!--:label="item.carno"-->
                                            <!--:value="item.carno"-->
                                    <!--&gt;</el-option>-->
                                <!--</el-select>-->
                                <el-input class="handle-input"  clearable v-model="form2.carno"></el-input>
                            </el-form-item>

                            <el-form-item label="出租车公司名称"prop="companyid":rules="[
                                    {required:true,message:'出租车公司不能为空'}
                                     ]">
                                <el-select class="handle-select"  v-model="form2.companyid" clearable filterable placeholder="请选择">
                                    <el-option
                                            v-for="item in companynameselectList"
                                            :key="item.id"
                                            :label="item.companyname"
                                            :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>

                                    <el-form-item label="计价器厂商名称" prop="factid" :rules="[
                                    {required:true,message:'计价器厂商名称不能为空'}
                                     ]">
                                        <el-select class="handle-select" v-model="form2.factid"  clearable filterable placeholder="请选择" @change="currentSel_add">
                                            <el-option
                                                    v-for="item in factnameselectList"
                                                    :key="item.id"
                                                    :label="item.factname"
                                                    :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                <!--</div></el-col>-->
                                <!--<el-col :span="8"><div class="grid-content bg-purple-light">-->
                                    <el-form-item label="计价器型号"prop="jjqtypeid" :rules="[
                {required:true,message:'计价器型号不能为空'}
                ]">
                                        <el-select class="handle-select" v-model="form2.jjqtypeid" clearable filterable placeholder="请选择">
                                            <el-option
                                                    v-for="item in jjqtypeselectList"
                                                    :key="item.id"
                                                    :label="item.jjqtype"
                                                    :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                <!--</div></el-col>-->
                                <!--<el-col :span="8"><div class="grid-content bg-purple">-->
                                    <el-form-item label="价格类别"prop="priceid" :rules="[
                {required:true,message:'价格类别不能为空'}
                ]">
                                        <el-select class="handle-select" v-model="form2.priceid" clearable filterable placeholder="请选择">
                                            <el-option
                                                    v-for="item in pricetypeselectList"
                                                    :key="item.id"
                                                    :label="item.pricetype"
                                                    :value="item.id"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                <!--</div></el-col>-->
                            <!--</el-row>-->
                            <!--<el-row>-->
                                <!--<el-col :span="8"><div class="grid-content bg-purple">-->

                                <!--</div></el-col>-->
                                <!--<el-col :span="8"><div class="grid-content bg-purple-light">-->

                                <!--</div></el-col>-->
                                <!--<el-col :span="8"><div class="grid-content bg-purple">-->
                                    <!--<el-button type="primary"  style="margin-left: 65%" @click="search_add" >查 询</el-button>-->
                                <!--&lt;!&ndash;</div></el-col>&ndash;&gt;-->
                            <!--</el-row>-->
                            <!--<el-row>-->
                                <!--<el-col :span="11"><div class="grid-content bg-purple">-->
                                    <!--<el-label>未绑定的GPS终端：</el-label>-->
                                    <!--<el-table :data="addData1" height="250"   v-loading="listLoading1"  border class="table" ref="multipleTable" @selection-change="handleSelectionChange1">-->
                                        <!--<el-table-column type="selection" width="55">-->
                                        <!--</el-table-column>-->
                                        <!--<el-table-column prop="carno" label="车牌号">-->
                                        <!--</el-table-column>-->
                                        <!--<el-table-column prop="companyname" label="出租车公司名称">-->
                                        <!--</el-table-column>-->
                                    <!--</el-table>-->
                                <!--</div></el-col>-->
                                <!--<el-col :span="2"  style="margin-top:10%"><div class="grid-content bg-purple-light">-->
                                    <!--<el-button type="primary" style="margin-left:20%;margin-top:20%;width:60%;"  :disabled = "add_disabled" @click="addTaximeter('form2')" >></el-button>-->
                                    <!--<el-button type="primary" style="margin-left:20%;margin-top:20%;width:60%;" @click="addVisible = false" >>></el-button>-->
                                    <!--<el-button type="primary" style="margin-left:20%;margin-top:20%;width:60%;":disabled = "delete_disabled" @click="handleDelete_add()" ><</el-button>-->
                                    <!--<el-button type="primary" style="margin-left:20%;margin-top:20%;width:60%;" @click="addVisible = false" ><<</el-button>-->
                                <!--</div></el-col>-->
                                <!--<el-col :span="11"><div class="grid-content bg-purple">-->
                                    <!--<el-label>待绑定的GPS终端：</el-label>-->
                                    <!--<el-table :data="addData2" height="250" v-loading="listLoading2" border class="table" ref="multipleTable" @selection-change="handleSelectionChange2">-->
                                        <!--<el-table-column type="selection" width="55">-->
                                        <!--</el-table-column>-->
                                        <!--<el-table-column prop="carno" label="车牌号">-->
                                        <!--</el-table-column>-->
                                        <!--<el-table-column prop="companyname" label="出租车公司名称">-->
                                        <!--</el-table-column>-->
                                    <!--</el-table>-->
                                <!--</div></el-col>-->
                            <!--</el-row>-->
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="addVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addCar(form2)">确 定</el-button>
                        </div>
                    </el-dialog>

                </el-form>
            <el-table :data="tableData" border  v-loading="listLoading" class="table" stripe>
                <el-table-column prop="carno" label="车牌号" >
                </el-table-column>
                <el-table-column prop="companyname" label="出租车公司名称" >
                </el-table-column>
                <el-table-column prop="factname" label="计价器厂商名称" >
                </el-table-column>
                <el-table-column prop="jjqtype" label="计价器型号" >
                </el-table-column>
                <el-table-column prop="pricetype" label="价格类别" >
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-col :span="24" class="toolbar pageBar">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout=" prev, pager, next, sizes, total"
                        :total="total">
                </el-pagination>
            </el-col>
            <!--<div class="pagination">-->
                <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">-->
                <!--</el-pagination>-->
            <!--</div>-->
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="37%"  >
            <el-form ref="form3" :model="form3"   label-width="125px" label-position="left" padding-left="5%">

                <el-form-item label="车牌号">
                    <el-input class="handle-input" disabled v-model="form3.carno"></el-input>
                </el-form-item>
                <el-form-item label="出租车公司名称">
                    <el-select class="handle-select" disabled v-model="form3.companyname"placeholder="请选择">
                    </el-select>
                </el-form-item>
                <el-form-item label="计价器厂商名称" prop="factname" :rules="[
                {required:true,message:'计价器厂商名称不能为空'}
                ]">
                    <el-select class="handle-select" v-model="form3.factname" clearable placeholder="请选择" @change="currentSel">
                        <el-option
                                v-for="item in factnameselectList"
                                :key="item.id"
                                :label="item.factname"
                                :value="item.factname"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="计价器型号" prop="jjqtype" :rules="[
                {required:true,message:'计价器型号不能为空'}
                ]">
                    <el-select class="handle-select" v-model="form3.jjqtype" clearable placeholder="请选择">
                        <el-option
                                v-for="item in jjqtypeselectList"
                                :key="item.id"
                                :label="item.jjqtype"
                                :value="item.jjqtype"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格类别"  prop="pricetype" :rules="[
                {required:true,message:'价格类别不能为空'}
                ]">
                    <el-select class="handle-select" v-model="form3.pricetype" clearable placeholder="请选择">
                        <el-option
                                v-for="item in pricetypeselectList"
                                :key="item.id"
                                :label="item.pricetype"
                                :value="item.pricetype"
                        ></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit('form3')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框_增加层里的 -->
        <el-dialog title="提示" :visible.sync="delVisible1" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="delete_add">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>



<script>
    export default {
        name: 'TaximeterMgmt',
        data() {
            return {
                // url: 'http://localhost:9090',
                url:"/api",
                tableData: [],
                addData1:[],
                addData2:[],
                currentPage: 1,
                total: 0,
                page: 1,
                pageSize: 10,
                pageNum:1,
                totalnum:0,
                totalpage:1,
                factnameselectList:[],
                jjqtypeselectList:[],
                companynameselectList:[],
                pricetypeselectList:[],
                // multipleSelection1: [],
                // multipleSelection2: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                delVisible1: false,
                addVisible:false,
                listLoading: false,
                // listLoading1: false,
                // listLoading2: false,
                carnoselectList:[],
                add_diabled: false ,
                delete_diabled: false,
                form: {
                    factname: '',
                    carno: '',
                    companyname: '',
                    jjqtype: '',
                    pricetype: ''
                },
                form2: {
                    carno: '',
                    companyid:'',
                    jjqtypeid: '',
                    priceid: '',
                    factid:''
                },
                form3: {
                    factname: '',
                    companyname: '',
                    jjqtype: '',
                    pricetype: '',
                    carno:'',
                    id:'',
                    factid: '',
                    jjqtypeid: '',
                    priceid: ''
                },
                form4:{
                  carno:'',
                  companyname:''
                },
                form5:{
                    taximeters:''
                },
                idx: -1
            }



        },
        created() {
            this.getData();
        },
        // computed: {
        //     data() {
        //         return this.tableData.filter((d) => {
        //             let is_del = false;
        //             for (let i = 0; i < this.del_list.length; i++) {
        //                 if (d.id === this.del_list[i].id) {
        //                     is_del = true;
        //                     break;
        //                 }
        //             }
        //             if (!is_del) {
        //                 if (d.address.indexOf(this.select_cate) > -1 &&
        //                     (d.name.indexOf(this.select_word) > -1 ||
        //                         d.address.indexOf(this.select_word) > -1)
        //                 ) {
        //                     return d;
        //                 }
        //             }
        //         })
        //     }
        // },
        methods: {
            // 分页导航
            // handleCurrentChange(val) {
            //     this.cur_page = val;
            //     this.getData();
            // },


            //改变时
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(this.pageSize);
                this.getData();
            },
            //条目改变时
            handleCurrentChange(val) {
                this.pageNum = val;
                console.log(this.pageNum);
                this.getData();
            },

        created() {
            this.getData();
        },
            //获取列表数据
            getData() {
                this.listLoading = true;
                this.$axios({
                    method: 'post',
                    url: this.url+"/taximeter/all?pageNum="+this.pageNum+"&pageSize="+this.pageSize,
                    data:this.form
                }).then((res) => {
                    this.tableData = res.data.list;
                    this.total = res.data.totalnum;
                    this.page = res.data.totalpage;
                    this.listLoading = false;
                    });
                this.$axios({
                    method: 'get',
                    url: this.url+"/fact/list",
                }).then((res) => {
                    this.factnameselectList = res.data;
                });
                this.$axios({
                    method: 'get',
                    url: this.url+"/price/list",
                }).then((res) => {
                    this.pricetypeselectList = res.data;
                });
                this.$axios({
                    method: 'get',
                    url: this.url+"/taximetertype/list",
                }).then((res) => {
                    this.jjqtypeselectList = res.data;
                });
                this.$axios({
                    method: 'get',
                    url: this.url+"/company/list",
                }).then((res) => {
                    this.companynameselectList = res.data;
                });
                this.$axios({
                    method: 'get',
                    url: this.url+"/carinfo/list",
                }).then((res) => {
                    this.carnoselectList = res.data;
                });

            },
            search() {
                this.is_search = true;
                this.getData();
            },
            // search_add() {
            //     console.log(this.form4);
            //     this.listLoading2 = true;
            //     this.$axios({
            //         method: 'post',
            //         url: this.url+"/taximeter/list",
            //         data:this.form4
            //     }).then((res) => {
            //         this.addData2 = res.data;
            //         this.listLoading2 = false;
            //     });
            //
            //     this.addVisible = true;
            //     this.listLoading1 = true;
            //     console.log(this.form4);
            //     this.$axios({
            //         method: 'post',
            //         url: this.url+"/carinfo/all",
            //         data:this.form4
            //     }).then((res) => {
            //         this.addData1 = res.data;
            //         this.listLoading1 = false;
            //     });
            // },
            all(){
                this.is_search = false;
                this.form.jjqtype = "";
                this.form.pricetype = "";
                this.form.companyname="";
                this.form.factname = "";
                this.form.carno = "";
                this.getData();
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            // handleAdd(index, row) {
            //     this.idx = index;
            //     const item = this.tableData[index];
            //     this.form = {
            //         name: item.name,
            //         date: item.date,
            //         address: item.address
            //     }
            //     this.editVisible = true;
            // },
            handleEdit(index, row) {
                this.idx = index;
                const item = this.tableData[index];
                this.form3 = {
                    jjqtype: item.jjqtype,
                    carno: item.carno,
                    pricetype: item.pricetype,
                    factname:item.factname,
                    companyname:item.companyname,
                    id:item.id
                };
                this.editVisible = true;
            },
            currentSel(selVal){
                if( this.form.jjqtype !== ''){
                    this.form.jjqtype = '';
                }
                if( this.form3.jjqtype !== ''){
                    this.form3.jjqtype = '';
                }


                if(selVal!==null&&selVal!==''){
                 this.$axios({
                     method: 'post',
                     url: this.url+"/taximetertype/factjjqtype?factname="+selVal,
                 }).then((res) => {
                     this.jjqtypeselectList = res.data;
                 });
             }else {
                 this.$axios({
                     method: 'get',
                     url: this.url+"/taximetertype/list",
                 }).then((res) => {
                     this.jjqtypeselectList = res.data;
                 });
             }

            },

            currentSel_add(selVal){
                if( this.form2.jjqtypeid !== ''){
                    this.form2.jjqtypeid = '';
                }

                console.log(selVal);
                if(selVal!==null&&selVal!==''){
                    this.$axios({
                        method: 'post',
                        url: this.url+"/taximetertype/factidjjqtype?factid="+selVal,
                    }).then((res) => {
                        this.jjqtypeselectList = res.data;
                    });
                }else {
                    this.$axios({
                        method: 'get',
                        url: this.url+"/taximetertype/list",
                    }).then((res) => {
                        this.jjqtypeselectList = res.data;
                    });
                }

            },
            handleAdd() {
                this.addVisible = true;
                // this.listLoading1 = true;
                // console.log(this.form4);
                // this.$axios({
                //     method: 'post',
                //     url: this.url+"/carinfo/all",
                //     data:this.form4
                // }).then((res) => {
                //     this.addData1 = res.data;
                //     this.listLoading1 = false;
                // });
                //
                // this.listLoading2 = true;
                // this.$axios({
                //     method: 'post',
                //     url: this.url+"/taximeter/list",
                //     data:this.form4
                // }).then((res) => {
                //     this.addData2 = res.data;
                //     this.listLoading2 = false;
                // });

            },
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
                const item1 = this.tableData[index];
                this.form3.id = item1.id;
            },
            // handleDelete_add() {
            //     this.delVisible1 = true;
            // },
            // delAll() {
            //     const length = this.multipleSelection.length;
            //     let str = '';
            //     this.del_list = this.del_list.concat(this.multipleSelection);
            //     for (let i = 0; i < length; i++) {
            //         str += this.multipleSelection[i].name + ' ';
            //     }
            //     this.$message.error('删除了' + str);
            //     this.multipleSelection = [];
            // },
            handleSelectionChange1(val) {
                this.multipleSelection1 = val;
            },
            handleSelectionChange2(val) {
                this.multipleSelection2 = val;
            },

            addCar(form2) {
                this.$refs.form2.validate((valid) => {
                    if (valid) {
                        console.log(this.form2);
                        this.$axios({
                            method: 'post',
                            url: this.url + "/taximeter/add",
                            data: this.form2
                        }).then((res) => {
                            if (res.data.message == "成功") {
                                this.$message.success(`添加成功`);
                                this.getData();
                                this.addVisible = false;
                                this.form2.carno = '';
                                this.form2.companyid = '';
                                this.form2.factid='';
                                this.form2.jjqtypeid='';
                                this.form2.priceid='';
                            } else {
                                this.$message.error(res.data.message);
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            // addTaximeter(form2) {
            //     this.$refs.form2.validate((valid) => {
            //         if (valid) {
            //             const length = this.multipleSelection1.length;
            //             if(length == 0){
            //                 this.$message.error('请选择出租车');
            //             }else {
            //                 this.add_diabled = true ;
            //                 this.form2.carInfos = this.multipleSelection1;
            //                 console.log(this.form2);
            //                 this.$axios({
            //                     method: 'post',
            //                     url: this.url+"/taximeter/add",
            //                     data:this.form2
            //                 }).then((res) => {
            //                     console.log(res);
            //                     if(res.data.message=="成功"){
            //                         this.form2.carInfos=[];
            //                         this.$message.success(`添加成功`);
            //                         this.getData();
            //                         this.add_diabled = false ;
            //                         this.listLoading2 = true;
            //                         this.$axios({
            //                             method: 'post',
            //                             url: this.url+"/taximeter/list",
            //                             data:this.form4
            //                         }).then((res) => {
            //                             this.addData2 = res.data;
            //                             this.listLoading2 = false;
            //                         });
            //                     }else {
            //                         this.$message.error(res.data.message);
            //                         this.add_diabled = false ;
            //                     }
            //                 }).catch(function (error) {
            //                     console.log(error);
            //                 });
            //
            //             }
            //         } else {
            //             console.log('error submit!!');
            //             return false;
            //         }
            //     });

            // },
            // 保存编辑
            saveEdit(form3) {

                this.$refs.form3.validate((valid) => {
                    if (valid) {
                        this.$axios({
                            method: 'post',
                            url: this.url+"/taximeter/update",
                            data:this.form3
                        }).then((res) => {
                            console.log(res);
                            if(res.data.message=="成功"){
                                this.$message.success(`修改第 ${this.idx+1} 行成功`);
                                this.getData();
                            }else {
                                this.$message.error(res.data.message);
                            }
                        }).catch(function (error) {
                            console.log(error);
                        });
                        this.editVisible = false;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            // 确定删除(增加里的)
            // delete_add() {
            //     const length = this.multipleSelection2.length;
            //     if(length == 0){
            //         this.$message.error('请选择计价器');
            //     }else {
            //         this.form5.taximeters = this.multipleSelection2;
            //         this.delete_diabled = true ;
            //         console.log(this.form2);
            //         this.$axios({
            //             method: 'post',
            //             url: this.url+"/taximeter/deleteall",
            //             data:this.form5
            //         }).then((res) => {
            //             console.log(res);
            //             if(res.data.message=="成功"){
            //                 this.$message.success(`删除成功`);
            //                 this.getData();
            //                 this.delete_diabled = false ;
            //                 this.listLoading2 = true;
            //                 this.delVisible1 = false;
            //                 this.$axios({
            //                     method: 'post',
            //                     url: this.url+"/taximeter/list",
            //                     data:this.form4
            //                 }).then((res) => {
            //                     this.addData2 = res.data;
            //                     this.listLoading2 = false;
            //                 });
            //             }else {
            //                 this.$message.error(res.data.message);
            //                 this.delete_diabled = false ;
            //             }
            //         }).catch(function (error) {
            //             console.log(error);
            //         });
            //
            //     }
            //
            // },
            // 确定删除
            deleteRow(){
                console.log(this.form3.id);
                this.$axios({
                    method: 'post',
                    url: this.url+"/taximeter/delete/"+this.form3.id.toString(),
                }).then((res) => {
                    console.log(res);
                    if(res.data.message=="成功"){
                        this.$message.success('删除成功');
                        this.delVisible = false;
                        this.getData();
                    }else {
                        this.$message.error(res.data.message);
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            }

        }
    }

</script>

<style>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 300px;
    }
    .handle-add-select {
        width: 200px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .handle-add-input {
        width: 200px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
        width: 80px;
    }
    .customWidth{
        width:80%;
    }

</style>
